<template>
  <page-header-wrapper>
    <a-card size="small">
      <h1>常用功能</h1>
      <a-divider />
      <!-- <a-button slot="extra" type="primary">设置</a-button> -->
      <draggable v-model="uselists" :group="groupA" animation="300" handle=".moverBox">
        <transition-group style="min-height: 120px; display: block">
          <a-col 
            :xs="6" 
            :sm="4" 
            :md="2" 
            class="flex moverBox" 
            v-for="item in uselists" 
            :key="item.id"
          >
            <div style="text-align: center; width: 100%; margin-bottom: 24px">
              <div
                style="height: 40px; width: 40px; margin: 0 auto; border-radius: 10px"
                :style="{ background: item.color }"
              >
                <a-icon :type="item.iconType" style="font-size: 24px; line-height: 40px; color: #fff" />
              </div>
              <div style="line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">{{ item.functionName }}</div>
            </div>
          </a-col>
        </transition-group>
      </draggable>
      <a-divider />
      <h1 style="margin-top: 24px">隐藏常用功能</h1>
      <draggable v-model="unUserlist" :group="groupB" animation="300" handle=".moverBox">
        <transition-group style="min-height: 120px; display: block">
          <a-col 
            :xs="6" 
            :sm="4" 
            :md="2" 
            class="flex moverBox" 
            v-for="item in unUserlist" 
            :key="item.id"
          >
            <div style="text-align: center; width: 100%; margin-bottom: 24px">
              <div
                style="height: 40px; width: 40px; margin: 0 auto; border-radius: 10px"
                :style="{ background: '#337ab7' }"
              >
                <a-icon type="calendar" style="font-size: 24px; line-height: 40px; color: #fff" />
              </div>
              <div style="line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">{{ item.functionName }}</div>
            </div>
          </a-col>
        </transition-group>
      </draggable>
      <a-divider />
      <a-form-item :wrapperCol="{ span: 16 }" style="text-align: center">
        <a-button htmlType="submit" type="primary" @click="handleSave()">保存</a-button>
      </a-form-item>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import draggable from 'vuedraggable'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { getFunctionListUsingPOST1, getFunctionListUsingPOST } from '@/api/api/shouye.ts'

export default {
  name: 'HomeSetting',
  components: {
    PageHeaderWrapper,
    draggable,
  },
  data() {
    return {
      drag: false,
      loadData: [],
      groupA: {
        name: 'itxst',
        pull: true, //B组拖拽时克隆到A组
        put: true,
      },
      groupB: {
        name: 'itxst',
        pull: true, //B组拖拽时克隆到A组
        put: true,
      },
      uselists: [
        { name: '我的待办', id: 1, color: '#337ab7' },
        { name: '店面调库', id: 2, color: '#f79263' },
      ],
      unUserlist: [
        { name: '店面调库记录', id: 3, color: '#337ab7' },
        { name: '销售下单', id: 4, color: '#f79263' },
      ],
    }
  },
  computed: {},
  created() {
    getFunctionListUsingPOST1()
      .then((res) => {
        this.uselists = res.data?.list.filter((item) => item.isShow === '1')
        this.unUserlist = res.data?.list.filter((item) => item.isShow === '0')
      })
      .catch(() => {
        this.list = []
      })
  },
  mounted() {},
  methods: {
    handleSave(){
      const vals = [...this.uselists?.map((item) => { return { ...item, isShow: '1' } }),
        ...this.unUserlist?.map((item) => { return { ...item, isShow: '0' } })
      ]
      getFunctionListUsingPOST({}, { data: vals })
      .then((res) => {
        this.$router.back()
        this.$message.success('操作成功')
      })
      .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    }
  },
}
</script>

<style lang="less" scoped>
@import './index.less';

.moverBox {
  cursor: move;
}

.flex {
  display: flex;
  justify-content: center;
}

.timeline-wrapper {
  flex: 1;
  padding: 15px 5px 0 160px;
  overflow-y: auto;

  .timeline {
    position: relative;
    width: 100%;
    height: 50px;

    &::before {
      position: absolute;
      top: 20px;
      bottom: 0;
      left: val(--left);
      width: 1px;
      background-image: linear-gradient(to bottom, rgba(144, 156, 173, 0.6) 60%, rgba(255, 255, 255, 0) 0%);
      background-repeat: repeat-y;
      background-position: left;
      background-size: 1px 5px;
      content: '';
    }

    .timeline-left {
      position: absolute;
      display: block;
      width: calc(var(--left) - 7px);
      width: 100px;
      margin-left: -120px;
      color: #8492a5;
      text-align: right;
    }

    .timeline-right {
      position: relative;
      margin: -3px 0 10px 20px;
    }

    .timeline-dot {
      position: absolute;
      top: 10px;
      left: var(--left);
      width: 7px;
      height: 7px;
      margin-left: -3.5px;
      line-height: 40px;
      text-align: center;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #d8d8d8;
    }
  }
}
</style>
